<template>
  <div class="sysConfig">
    <el-card class="body">
      <div slot="header" class="clearfix fix-lh">
        <span>代理配置</span>
        <div v-show="!changeMode" class="btn-list">
          <el-button v-hasPermission="permission.edit" @click="handleAdd">新增</el-button>
          <el-button @click="goRefresh">刷新</el-button>
          <el-button @click="goRefreshTree" v-show="hasRole">更新代理树</el-button>
          <el-button @click="gxjClose">贡献奖结算</el-button>
          <el-button @click="blClose">伯乐奖结算</el-button>
        </div>
      </div>
      <div class="table-body">
        <cvue-table :data="tableData" :loading="tableLoading" :option="tableOption">
          <template slot-scope="scope" slot="dljb">
            <span>{{scope.row.dljb }}</span>
          </template>  
          <template slot-scope="scope" slot="dljbmc">
            <span>{{scope.row.dljbmc }}</span>
          </template>          
          <template slot-scope="scope" slot="tj">
            <span>{{scope.row.tj }}</span>
          </template>
          <template slot-scope="scope" slot="xjdls">
            <span>{{scope.row.xjdls }}</span>
          </template>
          <template slot-scope="scope" slot="xjdljb">
            <span>{{scope.row.xjdljb }}</span>
          </template>
          <template slot-scope="scope" slot="bljms">
            <span>{{scope.row.bljms }}</span>
          </template>
          <template slot-scope="scope" slot="blj">
            <span>{{scope.row.blj != null ? scope.row.blj.length > 20? scope.row.blj.slice(0, 20) + '...' : scope.row.blj : ''}}</span>
          </template>
          <template slot-scope="scope" slot="gxjms">
            <span>{{scope.row.gxjms }}</span>
          </template>
          <template slot-scope="scope" slot="gxjbl">
            <span>{{scope.row.gxjbl }}</span>
          </template>
          <template slot-scope="scope" slot="yslfw">
            <span>{{scope.row.yslfw }}</span>
          </template>
          <template slot-scope="scope" slot="pzsj">
            <span>{{scope.row.pzsj }}</span>
          </template>
          <template slot-scope="scope" slot="tjdyr">
            <span>{{scope.row.tjdyr }}</span>
          </template>
          <template slot-scope="scope" slot="tjder">
            <span>{{scope.row.tjder }}</span>
          </template>
          <template slot-scope="scope" slot="tjdsr">
            <span>{{scope.row.tjdsr }}</span>
          </template>
          <el-table-column v-if="hasPermission" slot="actionMenu" label="操作" align="center" header-align="center">
            <template slot-scope="scope">
              <el-button type="text"
                size="small"
                @click="handleEdit(scope.row)"
                v-hasPermission="permission.edit"
                :disabled="changeMode">编辑</el-button>
              <el-button type="text"
                size="small"
                @click="habdleDeleteTip(scope.row)"
                v-hasPermission="permission.delete"
                :disabled="changeMode">删除</el-button>
            </template>
          </el-table-column>
        </cvue-table>
      </div>
    </el-card>
    <!-- 新增、编辑弹出框 -->
    <cvue-dialog :dialogVisible="dialogVisible" :dialogLoading="dialogLoading" :stateFoot='true' :title="addOrEdit == 'add' ?'新增': '编辑'" dialogWidth="1190px" @handleOpen="dialogOpen" @closeDialog="closeDialog" @confirmDialog="confirmDialog" @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <el-form ref="dialog_rule" label-width="125px" class="demo-ruleForm" :model="sysConfig">
          <el-row>
            <el-col :span="8">
              <el-form-item label="代理级别" prop="dljb">            
                <el-input v-model.trim="sysConfig.dljb"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="代理级别名称" prop="dljbmc">
                <el-input v-model.trim="sysConfig.dljbmc" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="条件" prop="tj">
                <el-input v-model.trim="sysConfig.tj"></el-input>
              </el-form-item>
            </el-col>          
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="下级代理数" prop="xjdls">
                <el-input v-model.trim="sysConfig.xjdls" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下级代理级别" prop="xjdljb">
                <el-input v-model.trim="sysConfig.xjdljb" ></el-input>
              </el-form-item>
            </el-col>  
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="伯乐奖描述" prop="bljms">
                <el-input v-model.trim="sysConfig.bljms" ></el-input>
              </el-form-item>          
            </el-col>       
            <el-col :span="8">
              <el-form-item label="伯乐奖" prop="blj">
                <el-input v-model.trim="sysConfig.blj" ></el-input>
              </el-form-item>
            </el-col>           
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="推荐第一人" prop="tjdyr">
                <el-input v-model.trim="sysConfig.tjdyr" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="推荐第二人" prop="tjder">
                <el-input v-model.trim="sysConfig.tjder" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="推荐第三人" prop="tjdsr">
                <el-input v-model.trim="sysConfig.tjdsr" ></el-input>
              </el-form-item>
            </el-col>          
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="贡献奖描述" prop="gxjms">
                <el-input v-model.trim="sysConfig.gxjms" ></el-input>
              </el-form-item>
            </el-col>       
            <el-col :span="8">
              <el-form-item label="贡献奖" prop="gxjbl">
                <el-input v-model.trim="sysConfig.gxjbl" ></el-input>
              </el-form-item>
            </el-col> 
          </el-row>       
          <el-row>
            <el-col :span="8">
              <el-form-item label="月收入范围" prop="yslfw">
                <el-input v-model.trim="sysConfig.yslfw" ></el-input>
              </el-form-item>
            </el-col>       
          </el-row>   
        </el-form>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import { touchRefresh } from '@/mixins/mixinKeep'

export default {
  name: 'sysConfig',
  mixins: [touchRefresh],
  components: {
    cvueTable,
    cvueDialog
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time > new Date().getTime()
        }
      },
      changeMode: false,
      hasPermission: false,
      addOrEdit: 'add',
      date: [],
      tableData: [],
      tableOption: {
        stripe: true,
        border: true,
        width: '100%',
        index: false,
        cloumn: [
          { prop: 'dljb', label: '代理级别', align: 'center', width: 80 },
          { prop: 'dljbmc', label: '代理级别名称', align: 'center', slotStatus: true },
          { prop: 'tj', label: '条件', align: 'center', slotStatus: true },
          { prop: 'xjdls', label: '下级代理数', align: 'center', slotStatus: true },  
          { prop: 'xjdljb', label: '下级代理级别', align: 'center', slotStatus: true },       
          { prop: 'bljms', label: '伯乐奖描述', align: 'center', slotStatus: true },  
          { prop: 'blj', label: '伯乐奖', align: 'center', slotStatus: true },
          { prop: 'tjdyr', label: '推荐第一人', align: 'center', width: 150, slotStatus: true },
          { prop: 'tjder', label: '推荐第二人', align: 'center' },
          { prop: 'tjdsr', label: '推荐第三人', align: 'center' },
          { prop: 'gxjms', label: '贡献奖描述', align: 'center' },
          { prop: 'gxjbl', label: '贡献奖', align: 'center' },
          { prop: 'yslfw', label: '月收入范围', align: 'center' },
          { prop: 'pzsj', label: '配置时间', align: 'center' }
        ]
      },
      tableLoading: false,
      dialogVisible: false,
      dialogLoading: false,
      hasRole: false,
      sysConfig: {
        dljbId: '',
        dljbmc: '',
        tj: '',
        xjdls: '',
        xjdljb: '',
        bljms: '',
        blj: '',
        tjdyr: '',
        tjder: '',
        tjdsr: '',
        gxjms: '',
        gxjbl: '',
        yslfw: '',
        dljb: ''
      }
    }
  },
  filters: {
  },

  methods: {
    cancelSave () {
      this.tableData = JSON.parse(JSON.stringify(this.oldData))
      this.tableObject.destroy()
      this.changeMode = false
    },
    handleSelect (item) {
      
    },
    // 添加代理配置
    handleAdd () {
      this.id = ''
      this.dialogVisible = true
      this.addOrEdit = 'add'
    },
    // 编辑代理配置
    handleEdit (item) {
      this.dialogVisible = true
      this.addOrEdit = 'edit'
      this.sysConfig = {
          dljbId: item.dljbId,
          dljb: item.dljb,
          dljbmc: item.dljbmc,
          tj: item.tj,
          xjdls: item.xjdls,
          xjdljb: item.xjdljb,
          bljms: item.bljms,
          blj: item.blj,
          tjdyr: item.tjdyr,
          tjder: item.tjder,
          tjdsr: item.tjdsr,
          gxjms: item.gxjms,
          gxjbl: item.gxjbl,
          yslfw: item.yslfw
      }
    },
    // 删除代理配置
    habdleDeleteTip (item) {
      this.$confirm('是否确定删除配置？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.habdleDelete(item.dljbId)
        })
        .catch(() => {})
    },
    habdleDelete (id) {
      this.$store.dispatch('sysConfig/DelSysConfig', id).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            duration: 2000,
            message: '删除成功'
          })
          this.fetchData()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 刷新页面
    goRefresh () {
      this.fetchData()
    },
    dialogOpen () {      
    },
    // 关闭前
    handleClose () {
      this.accountList = []
      this.$refs.dialog_rule.clearValidate()
      this.$refs.dialog_rule.resetFields()
      this.dialogVisible = false
    },
    // 关闭dialog
    closeDialog (index, row) {
      this.accountList = []
      this.$refs.dialog_rule.clearValidate()
      this.$refs.dialog_rule.resetFields()
      this.dialogVisible = false
    },
    // 提交订单
    confirmDialog (formName) {
      let optionUrl, optionTxt
      if (this.addOrEdit == 'add') {
        optionUrl = 'sysConfig/AddSysConfig'
        optionTxt = '新增成功'
      } else {
        optionUrl = 'sysConfig/EditSysConfig'
        optionTxt = '编辑成功'
      }
      this.$store.dispatch(optionUrl, this.sysConfig).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: optionTxt
          })
          this.$refs.dialog_rule.clearValidate()
          this.$refs.dialog_rule.resetFields()
          this.sysConfig = {
                dljbId: '',
                dljb: '',
                dljbmc: '',
                tj: '',
                xjdls: '',
                xjdljb: '',
                bljms: '',
                blj: '',
                tjdyr: '',
                tjder: '',
                tjdsr: '',
                gxjms: '',
                gxjbl: '',
                yslfw: ''
          }
          this.dialogVisible = false
          this.fetchData()
        } else {
          this.$message.error(res.msg)
          // this.dialogVisible = false
        }
      })
    },    
    // 节点单击事件
    handleNodeClick(data) {
      this.queryData.agentId = data.id
      this.fetchData()
    },
    // 刷新代理人员树
    goRefreshTree () {
      this.$store.dispatch('agent/RefushAgent').then((res) => {
        if (res.code === 200) {
          this.$message({
              type: 'success',
              message: '更新成功'
            })
        }
      })
    },
    // 获取数据
    fetchData () {
      this.tableLoading = true
      this.$store.dispatch('sysConfig/GetSysConfig', this.queryData).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data
          } else if (res.code == 500) {
            this.$message.error(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.tableLoading = false
        })
        .catch((err) => {
          console.log(err)
          this.tableLoading = false
        })
    },
    gxjClose () {
      this.$confirm('是否确定结算贡献奖奖励？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('contribution/CloseContribution', '').then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '结算成功'
              })
              this.dialogVisible = false
              this.fetchData()
              this.fetchGetAgentList()
            } else {
              this.$message.error(res.msg)
              // this.dialogVisible = false
            }
          })
        })
        .catch(() => {})
    },
    blClose () {
      this.$confirm('是否确定结算伯乐奖奖励？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('bole/CloseBole', '').then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '结算成功'
              })
              this.dialogVisible = false
              this.fetchData()
              this.fetchGetAgentList()
            } else {
              this.$message.error(res.msg)
              // this.dialogVisible = false
            }
          })
        })
        .catch(() => {})
    }
  },
  mounted () {
    this.fetchData()
    // 权限配置
    let permission = sessionStorage.getItem('permission')
    if (permission) {
      permission = JSON.parse(permission)
      permission.forEach(p => {
        if (p.code == '15000' && p.permissions.indexOf('edit') != -1) {
          this.hasPermission = true
        }
      })
    }
    let userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      userInfo = JSON.parse(userInfo)
      this.user = userInfo
      
      if (userInfo.roleId == 2 || userInfo.roleId == 1) {
        this.hasRole = true
      }
    }
  }
}
</script>
<style scoped>
.sysConfig {
  padding: 10px 15px;
  margin: 0 !important;
  height: auto !important;
}
</style>
<style lang="scss">
.sysConfig {
  .search-button {
    line-height: 30px !important;
  }
  .el-card__header {
    border-bottom: none !important;
  }
  .el-col-4 {
    width: 15%;
  }
  .el-date-editor {
    width: 100% !important;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .body {
    margin-top: 10px;
    background-color: #fff;
    .btn-list {
      float: right;
    }
    .fix-lh {
      line-height: 32px;
    }
    .text-right {
      text-align: right;
    }
    // .home-form{
    //     margin-bottom: 7px;
    //     margin-top: -17px;
    // }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
    .el-card__header,
    .el-card__body {
      padding: 15px;
    }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
    .el-table__body {
      tr td:nth-child(2) span {
        // color: #409eff;
        // cursor: pointer;
      }
      tr td:nth-child(5) span {
        // cursor: pointer;
      }
      tr td:nth-child(6) span {
        // color: #409eff;
        cursor: pointer;
      }
    }
    .table-body {
      margin-top: -15px;
    }
  }
  .el-select {
    width: 100%;
  }
  .top-bar {
    display: flex;
    min-width: 750px;
    .keyword-bar {
      width: 240px;
      margin-right: 10px;
    }
    .time-bar {
      width: 430px;
    }
  }
  .demo-ruleForm.el-input{
     width: 240px;
  }
}
</style>
